<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.hit }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >请选择参数</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 选择框开始 -->
            <el-form ref="form" label-width="300px">
              <el-divider></el-divider>
              <el-form-item label="Set library">
                <el-cascader
                  :options="options"
                  v-model="value"
                  :show-all-levels="false"
                  @change="handleChange"
                  :props="{ expandTrigger: 'hover' }"
                >
                  <template slot-scope="{ node, data }">
                    <span v-if="!node.isLeaf">
                      <span>{{ data.label }}</span>
                      ({{ data.children.length }})
                    </span>
                    <span v-if="node.isLeaf">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="data.description"
                        placement="right"
                      >
                        <span style="float: left; width: 100%">{{
                          data.label
                        }}</span>
                      </el-tooltip>
                    </span>
                  </template>
                </el-cascader>
              </el-form-item>
              <el-divider></el-divider>
              <el-form-item label="Self defined">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="define your own customized metabolite sets"
                  placement="top"
                >
                  <el-button>自定义</el-button>
                </el-tooltip>
              </el-form-item>
              <el-divider></el-divider>
              <el-form-item label="metabolite sets containing at least">
                <el-input-number
                  @change="handleChange"
                  v-model="num"
                  :min="0"
                  :max="5"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <!-- 选择框结束 -->
            <el-row>
              <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                <div class="grid-content unseealbe-content"></div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button plain style="margin: 10px" @click="setCurrentMsetLib()">提交</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
export default {
  data() {
    return {
      num: 2,
      options: [
        {
          value: "Pathway based",
          label: "Pathway based",
          children: [
            {
              value: "smpdb_pathway",
              label: "SMPDB",
              description:
                "99 metabolite sets based on normal human metabolic pathways.",
            },
            {
              value: "kegg_pathway",
              label: "KEGG",
              description:
                "84 metabolite sets based on KEGG human metabolic pathways (Oct. 2019).",
            },
            {
              value: "drug",
              label: "Drug related",
              description:
                "461 metabolite sets based on drug pathways from SMPDB.",
            },
          ],
        },
        {
          value: "Disease signatures",
          label: "Disease signatures",
          children: [
            {
              value: "blood",
              label: "Blood",
              description: "344 metabolite sets reported in human blood.",
            },
            {
              value: "urine",
              label: "Urine",
              description: "384 metabolite sets reported in human urine.",
            },
            {
              value: "csf",
              label: "CSF",
              description:
                "166 metabolite sets reported in human cerebral spinal fluid (CSF).",
            },
            {
              value: "fecal",
              label: "Feces",
              description: "44 metabolite sets reported in human feces.",
            },
          ],
        },
        {
          value: "Chemcial structures",
          label: "Chemcial structures",
          children: [
            {
              value: "super_class",
              label: "Super-class",
              description:
                "35 super chemical class metabolite sets or lipid sets",
            },
            {
              value: "main_class",
              label: "Main-class",
              description:
                "464 main chemical class metabolite sets or lipid sets",
            },
            {
              value: "sub_class",
              label: "Sub-class",
              description:
                "1072 sub chemical class metabolite sets or lipid sets",
            },
          ],
        },
        {
          value: "Other types",
          label: "Other types",
          children: [
            {
              value: "snp",
              label: "SNPs",
              description:
                "4,598 metabolite sets based on their associations with SNPs loci.",
            },
            {
              value: "predicted",
              label: "Predicted",
              description:
                "912 metabolic sets predicted to change in the case of dysfunctional enzymes.",
            },
            {
              value: "locations",
              label: "Locations",
              description:
                "73 metabolite sets based on organ, tissue, and subcellular localizations.",
            },
          ],
        },
      ],
      value: "",
      paths: [
        { path: "/", hit: "首页" },
        { path: "/algo", hit: "分析算法" },
        { path: "/algo/enrich-normal/enrich-input", hit: "富集分析输入" },
        { path: "/algo/enrich-normal/enrich-list", hit: "富集分析输入列表" },
        { path: "/algo/enrich-normal/enrich-parameter", hit: "富集分析参数列表" },
      ],
    };
  },
  created() {

  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    setCurrentMsetLib() {
      let cmd = `mSet<-SetMetabolomeFilter(mSet, F);\nmSet<-SetCurrentMsetLib(mSet, "${this.value[1]}", ${this.num});`;
      console.log(cmd)
      algo.SetCurrentMsetLib(cmd).then((response) => {
        if (response.data.code == 20000){
          this.$router.push({name:'algo-enrich-graph'})
        }
      });
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>